:root {
  /* Background */
  --background-dark-160: #14171f;
  --background-dark-140: #181b25;
  --background-dark-120: #1c1f2b;
  --background-dark-100: #232736;
  --background-dark-90: #272b3c;
  --background-dark-80: #30354a;
  --background-dark-70: #383e58;
  --background-dark-60: #404867;
  --background-dark-50: #485276;
  --background-dark-40: #505c85;
  --background-dark-30: #586694;
  --background-dark-20: #6070a3;
  --background-dark-10: #687ab2;

  /* Navy */
  --navy-light-100: #001a72;
  --navy-light-80: #33488e;
  --navy-light-60: #6676aa;
  --navy-light-40: #919fcf;
  --navy-light-20: #c1c6e5;
  --navy-light-10: #eef0ff;
  --navy-light-transparent: #33488e40;

  --navy-dark-140: #1b2445;
  --navy-dark-120: #122154;
  --navy-dark-100: #001a72;
  --navy-dark-80: #0a2688;
  --navy-dark-70: #33488e;
  --navy-dark-60: #7485bd;
  --navy-dark-40: #abbcf5;
  --navy-dark-20: #c1c6e5;

  /* Purple */
  --purple-light-100: #782aeb;
  --purple-light-80: #b58df1;
  --purple-light-60: #d1bbf3;
  --purple-light-40: #e8dafc;
  --purple-light-20: #f5eeff;
  --purple-light-transparent: #f5eeff40;

  --purple-dark-140: #473d68;
  --purple-dark-120: #6a539a;
  --purple-dark-100: #b07eff;
  --purple-dark-80: #c49ffe;
  --purple-dark-60: #d0b2ff;
  --purple-dark-40: #e9dbff;

  /* Blue */
  --blue-light-100: #38acdd;
  --blue-light-80: #5bb9e0;
  --blue-light-60: #87cce8;
  --blue-light-40: #b5e1f1;
  --blue-light-20: #e1f3fa;

  --blue-dark-140: #1b4865;
  --blue-dark-120: #126893;
  --blue-dark-100: #00a9f0;
  --blue-dark-80: #6fcef5;
  --blue-dark-60: #a8dbf0;
  --blue-dark-40: #d7f0fa;

  /* Green */
  --green-light-100: #57b495;
  --green-light-80: #82cab2;
  --green-light-60: #b1dfd0;
  --green-light-40: #dff2ec;
  --green-light-20: #ebfcf7;

  --green-dark-140: #2a4f4a;
  --green-dark-120: #31775d;
  --green-dark-100: #3fc684;
  --green-dark-80: #7adead;
  --green-dark-60: #a0dfc0;
  --green-dark-40: #d3f5e4;

  /* Red */
  --red-light-100: #ff6259;
  --red-light-80: #fa7f7c;
  --red-light-60: #ffa3a1;
  --red-light-40: #ffd2d7;
  --red-light-20: #ffedf0;

  --red-dark-140: #5a3b46;
  --red-dark-120: #914f55;
  --red-dark-100: #ff7774;
  --red-dark-80: #ff8b88;
  --red-dark-60: #ffb4b2;
  --red-dark-40: #ffdcdb;

  /* Yellow */
  --yellow-light-100: #ffd61e;
  --yellow-light-80: #ffe04b;
  --yellow-light-60: #ffe780;
  --yellow-light-40: #fff1b2;
  --yellow-light-20: #fffae1;

  --yellow-dark-140: #5a553a;
  --yellow-dark-120: #91823d;
  --yellow-dark-100: #ffdd44;
  --yellow-dark-80: #ffe678;
  --yellow-dark-60: #fff1b2;
  --yellow-dark-40: #fff9db;

  /* White */
  --off-white: #f8f9ff;
  --white: #fcfcff;

  /* Gray */
  --grey-light-100: #f7f7f7;
  --grey-light-80: #e1e1e1;
  --grey-light-60: #cccccc;
  --grey-light-40: #b2b2b2;
  --grey-light-20: #999999;

  --grey-dark-140: #333333;
  --grey-dark-120: #4d4d4d;
  --grey-dark-100: #666666;
  --grey-dark-80: #808080;
  --grey-dark-60: #999999;
  --grey-dark-40: #b3b3b3;

  /* Touch indicator */
  --touch-indicator-background: var(--grey-dark-40);
  --touch-indicator-border: var(--grey-dark-80);
  --touch-indicator-pressed-background: var(--green-light-100);
  --touch-indicator-pressed-border: var(--green-dark-120);
  --touch-indicator-pressed-shadow: 2px 2px 6px 1px rgba(0, 0, 0, 0.8);

  /* Inspector */
  --inspect-area-background: rgba(56, 172, 221, 0.85);
  --dimensions-box-background: #404040;

  /* Open Deep Link */
  --deep-link-history-query-match-color: #c19420;

  /* Size constants */
  --swm-button-size: 30px;
}

body {
  /* Open Deep Link */
  --deep-link-history-query-match-color: var(--swm-button-background);

  --swm-active-item: var(--vscode-list-activeSelectionForeground);
  --swm-preview-background: none;

  --swm-default-text: var(--vscode-foreground);
  --swm-marked-text: var(--vscode-editor-findMatchHighlightBackground);
  --swm-highlighted-text: var(--vscode-textCodeBlock-background);
  --swm-error-color: var(--vscode-errorForeground);
  --swm-secondary-text: var(--vscode-textSecondaryForeground);
  --swm-disabled-text: var(--vscode-disabledForeground);

  --swm-dropdown-item-highlighted: var(--vscode-list-hoverBackground);

  --swm-popover-background: var(--vscode-dropdown-background);

  --swm-separator: var(--vscode-dropdown-border);

  /* Shadows */
  --swm-focus-outline: 0 0 0 2px var(--vscode-focusBorder);
  --swm-backdrop-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1),
    1px -4px 6px -3px rgba(0, 0, 0, 0.1);
  /* Device select */
  --swm-device-select-trigger: var(--vscode-input-background);
  --swm-device-select-background: var(--vscode-dropdown-background);
  --swm-device-select-trigger-text: var(--vscode-foreground);
  --swm-device-select-trigger-hover: var(--vscode-list-hoverBackground);
  --swm-device-select-trigger-disabled: var(--vscode-disabledBackground);
  --swm-device-select-separator: var(--vscode-dropdown-border);
  --swm-device-select-highlighted: var(--vscode-list-hoverBackground);
  --swm-device-select-disabled-text: var(--vscode-disabledForeground);
  --swm-device-select-label: var(--vscode-textSecondaryForeground);
  --swm-device-select-stop-badge-background: var(--vscode-statusBarItem-errorBackground);
  --swm-device-select-stop-badge-foreground: var(--vscode-statusBarItem-errorForeground);
  --swm-device-select-rich-item-text: var(--vscode-foreground);
  --swm-device-select-rich-item-subtitle: var(--vscode-textSecondaryForeground);
  --swm-device-select-rich-item-icon: var(--vscode-textSecondaryForeground);
  --swm-device-select-rich-item-icon-selected: var(--vscode-list-activeSelectionForeground);
  --swm-select-content-background: var(--vscode-dropdown-background);
  /* Slider */
  --swm-slider: var(--swm-button-background);

  /* Radio group */
  --swm-radio-group-item: var(--vscode-toolbar-hoverBackground);

  /* Startup message */
  --swm-startup-message: var(--off-white);
  --swm-phone-content-loading-background: rgba(0, 0, 0, 0.75);

  /* Button */
  --swm-button: var(--vscode-button-foreground);
  --swm-button-background: var(--vscode-button-background);
  --swm-button-border: var(--vscode-button-border);
  --swm-button-disabled: var(--swm-disabled-text);
  --swm-button-hover: var(--vscode-button-hoverBackground);
  --swm-icon-button: var(--vscode-icon-foreground);

  --swm-icon-button-hover-background: var(--vscode-list-hoverBackground);
  --swm-icon-button-hover: var(--vscode-list-hoverForeground);
  --swm-icon-button-active: var(--vscode-list-activeSelectionForeground);
  --swm-icon-button-active-background: var(--vscode-list-activeSelectionBackground);

  --swm-button-active: var(--vscode-button-activeForeground);
  --swm-button-active-background: var(--vscode-button-active);

  --swm-button-selected: var(--vscode-button-foreground);
  --swm-button-selected-background: var(--vscode-list-activeSelectionBackground);
  --swm-button-selected-hover: var(--vscode-button-hoverForeground);
  --swm-button-selected-hover-background: var(--vscode-list-hoverBackground);

  --swm-button-secondary: var(--vscode-button-secondaryForeground);
  --swm-button-secondary-background: var(--vscode-button-secondaryBackground);
  --swm-button-secondary-hover: var(--vscode-button-secondaryHoverBackground);

  --swm-button-ternary: var(--vscode-button-foreground);
  --swm-button-ternary-background: var(--vscode-button-background);
  --swm-button-ternary-hover: var(--vscode-button-hoverBackground);

  --swm-button-counter: var(--vscode-activityBarBadge-foreground);
  --swm-button-counter-background: var(--vscode-activityBarBadge-background);
  --swm-button-counter-border: var(--vscode-contrastBorder);

  --swm-button-popover-secondary: var(--vscode-button-secondaryForeground);
  --swm-button-popover-secondary-background: var(--swm-button-secondary-hover);
  --swm-button-popover-secondary-active-background: var(--swm-button-border);
  --swm-button-popover-secondary-hover: var(--vscode-menu-border);

  --swm-button-recording-on: var(--vscode-activityBarBadge-foreground);
  --swm-button-recording-on-background: var(--vscode-activityBarBadge-background);
  --swm-button-replay-hover: var(--swm-button-hover);

  /* Tooltip */
  --swm-tooltip-primary: var(--swm-default-text);
  --swm-tooltip-primary-background: var(--swm-popover-background);
  --swm-tooltip-secondary: var(--swm-default-text);
  --swm-tooltip-secondary-background: var(--vscode-sideBar-background);
  --swm-tooltip-ternary: var(--navy-dark-100);
  --swm-tooltip-ternary-background: var(--off-white);

  /* ScrollArea */
  --swm-scroll-area-background: var(--vscode-editor-background);
  --swm-scroll-area-shadow: 0 0 0 1px var(--vscode-widget-border);
  --swm-scrollbar-background: var(--vscode-scrollbar-background);
  --swm-scrollbar-thumb: var(--vscode-scrollbarSlider-background);
  --swm-scrollbar-hover: var(--vscode-scrollbarSlider-hoverBackground);

  --swm-input-shadow: 0 0 0 1px var(--navy-light-10);

  /* Select */
  --swm-scroll-area-background: var(--vscode-editor-background);
  --swm-scroll-area-shadow: 0 0 0 1px var(--vscode-widget-border);
  --swm-scrollbar-background: var(--vscode-scrollbarSlider-background);
  --swm-scrollbar-thumb: var(--vscode-scrollbarSlider-background);
  --swm-scrollbar-hover: var(--vscode-scrollbarSlider-hoverBackground);
  --swm-select-hover-background: var(--vscode-list-hoverBackground);
  --swm-select-shadow: 0 1px 10px var(--vscode-widget-shadow);
  --swm-select-disabled: var(--vscode-disabledForeground);
  --swm-select-item-highlighted-background: var(--vscode-list-hoverBackground);
  --swm-select-border: var(--vscode-input-border);
  --swm-select-background: var(--vscode-input-background);
  --swm-select-disabled-background: var(--vscode-list-inactiveSelectionBackground);

  /* Input */
  --swm-input-background: var(--vscode-input-background);
  --swm-input-border: var(--vscode-input-border);
  --swm-input-disabled-background: var(--vscode-list-inactiveSelectionBackground);

  --swm-focus-outline-color: var(--vscode-focusBorder);

  /* Switch */
  --swm-switch-root-background: var(--vscode-toolbar-hoverBackground);
  --swm-switch-root-shadow: 0 0 0 1px var(--vscode-input-border);
  --swm-switch-root-disabled: var(--vscode-toolbar-hoverBackground);
  --swm-switch-root-background-checked: var(--swm-button-background);

  /* Manage devices */
  --swm-device-title: var(--vscode-foreground);
  --swm-device-subtitle: var(--vscode-textSecondaryForeground);
  --swm-device-icon: var(--vscode-foreground);
  --swm-device-icon-background: var(--vscode-list-inactiveSelectionBackground);
  --swm-device-icon-background-selected: var(--vscode-button-background);
  --swm-device-icon-selected: var(--vscode-button-foreground);
  --swm-device-icon-border-selected: 2px solid var(--vscode-list-activeSelectionForeground);
  --swm-device-delete-icon: var(--vscode-errorForeground);
  --swm-device-warning-icon: var(--vscode-textCodeBlock-background);
  /* Devices not found */
  --swm-devices-not-found-icon: var(--white);
  --swm-devices-not-found-icon-background: var(--navy-light-20);

  /* URL select */
  --swm-url-select: var(--vscode-foreground);
  --swm-url-select-background: var(--vscode-dropdown-background);
  --swm-url-select-hover-background: var(--vscode-list-hoverBackground);
  --swm-url-select-disabled-background: var(--vscode-disabledBackground);
  --swm-url-select-highlighted-background: var(--vscode-list-hoverBackground);
  --swm-url-select-label: var(--vscode-textSecondaryForeground);
  --swm-url-select-special-text: var(--vscode-activityBarBadge-background);
  --swm-url-select-separator: var(--vscode-dropdown-border);

  /* Debugger */
  --swm-debugger-label: var(--off-white);
  --swm-debugger-button-group: var(--vscode-foreground);
  --swm-debugger-button-group-background: var(--vscode-dropdown-background);
  --swm-debugger-button-group-border: 1px solid var(--vscode-dropdown-border);

  /* Zoom controls */
  --swm-zoom-controls-background: var(--vscode-menu-background);
  --swm-zoom-controls-button-background-hover: var(--vscode-list-hoverBackground);
  --swm-zoom-select-trigger-text: var(--vscode-foreground);
  --swm-zoom-select-trigger-hover: var(--vscode-list-hoverBackground);
  --swm-zoom-select-trigger-disabled: var(--vscode-disabledBackground);
  --swm-zoom-select-highlighted: var(--vscode-list-hoverBackground);
  --swm-zoom-select-disabled-text: var(--vscode-disabledForeground);
  --swm-zoom-select-separator: var(--vscode-dropdown-border);

  /* Replay */
  --swm-replay-overlay-background: linear-gradient(
    0deg,
    var(--vscode-editor-foldBackground),
    var(--vscode-widget-shadow)
  );

  --swm-replay-len-select: var(--swm-button);
  --swm-replay-len-select-background: var(--swm-button-background);
  --swm-replay-len-select-hover-background: var(--swm-button-hover);
  --swm-replay-len-select-highlighted-background: var(--swm-button-selected-hover-background);

  /* Open Deep Link */
  --deep-link-history-border: var(--navy-light-10);
  --deep-link-history-selected-item-background: var(--navy-light-10);

  --swm-radio-group-indicator: var(--swm-button-background);

  --swm-dropdown-border: 1px solid var(--vscode-menu-border);
  --swm-dropdown-shadow: 0 0 8px 2px var(--vscode-widget-shadow);
}

body.vscode-high-contrast {
  --swm-switch-root-background-checked: var(--vscode-menu-border);
  --swm-radio-group-indicator: var(--vscode-menu-border);
  --swm-slider: var(--vscode-menu-border);
  --swm-device-icon-background-selected: var(--vscode-menu-border);
  --swm-button-background: var(--vscode-menu-border);
  --swm-button: var(--vscode-input-background);
  --swm-button-hover: var(--vscode-input-background);
  --swm-device-icon-selected: var(--swm-button);
}
